<template>
  <div class="detail">
    <div class="top">
      <img
        class="logo"
        @click="goHome"
        style="cursor: pointer"
        src="../../assets/logos.png"
      />
      <!-- <el-button type="primary" @click="showLoginModal">登录</el-button> -->
    </div>
    <div class="info">
      <div class="sch-top">
        <div class="logo">
          <img class="logo-img" :src="schoolObj.logoUrl" />
        </div>
        <div class="right">
          <div class="sch-name">
            <span>{{ schoolObj.schoolName }}</span>
            <span class="major"
              >{{ schoolObj.majorName }}({{ schoolObj.majorCode }})</span
            >
            <span class="major">{{ schoolObj.learningStyleName }}</span>
            <span class="wrong" @click="showWrong">纠错</span>
            <el-button
              v-if="store.state.isOrganization == 'true'"
              @click="onExportMajorData"
              type="success"
              style="margin-left: 10px"
            >
              导出专业报告
            </el-button>
            <span class="wrong" @click="toEditDetail" style="margin-left: 10px"
              >编辑</span
            >
          </div>
          <div class="item">
            <span class="collegeName">{{ schoolObj.collegeName }}</span>
          </div>
          <div class="item">
            <img class="image" src="../../assets/images/addr.svg" />
            <span>{{ schoolObj.provinceName }}</span>
          </div>
          <div class="tags">
            <div class="ele" v-for="ele in schoolObj.schoolTags" :key="ele">
              {{ ele }}
            </div>
          </div>
          <div class="item">
            <img class="image" src="../../assets/images/phone.svg" />
            <span>学校电话: {{ schoolObj.contactRsp?.dh }}</span>
          </div>
          <div class="sch-button">
            <div>
              <div class="item">
                <img class="image" src="../../assets/images/mail.svg" />
                <span>电子邮箱: {{ schoolObj.contactRsp?.yx }}</span>
              </div>
              <div class="item">
                <img class="image" src="../../assets/images/net.svg" />
                <span>学校网址: {{ schoolObj.contactRsp?.wz }}</span>
              </div>
            </div>
            <div class="button-left">
              <el-tag type="danger" size="large">
                <div
                  style="
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 14px;
                  "
                >
                  <div>已被</div>
                  <el-icon style="margin-left: 2px" v-if="IntentionShow != true"
                    ><View
                  /></el-icon>
                  <div>{{ IntentionShow ? count : "" }}人加入考研目标志愿</div>
                </div>
              </el-tag>
              <el-button
                v-if="!IntentionShow"
                @click="onIntentionDialog"
                type="danger"
                style="margin-left: 10px"
              >
                查看
              </el-button>
              <!-- <el-button
                @click="onIntentionDialog"
                type="success"
                round
                :loading="IntentionLoading"
                size="large"
                :icon="IntentionShow ? CircleCheck : CirclePlus"
                > {{ IntentionShow ? '已设为意向志愿' : '设为意向志愿' }}</el-button
              > -->
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <ul>
          <li
            :class="{ active: ele.value === active }"
            v-for="ele in tabList"
            :key="ele.value"
            @click="clickTab(ele)"
          >
            {{ ele.label }}
          </li>
        </ul>
      </div>
      <img class="bg" src="../../assets/images/bg.png" />
      <img class="rg" src="../../assets/images/bg.png" />
    </div>
    <div class="con">
      <component
        :is="activeCom"
        :majorId="majorId.majorOutRelationId"
        @onChange="onChangeUnlock" 
        ref="childRef"
      ></component>
    </div>
    <el-dialog
      v-model="organizationDialog"
      title="导出专业报告"
      width="25%"
      :before-close="handleOrganizationClose"
    >
      <div class="upload">
        <div class="down-tips">导出时间约为5分钟,可到邮箱查看</div>
        <el-form
          ref="formOrganizationRef"
          :model="formOrganization"
          :rules="rulesOrganization"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="formOrganization.email" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="organizationDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmOrganization"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="wrongDialog"
      title="纠错信息"
      width="40%"
      :before-close="handleClose"
    >
      <div class="upload">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="学校名称" prop="schoolName">
            <el-input v-model="form.schoolName" />
          </el-form-item>
          <el-form-item label="院系名称" prop="collegeName">
            <el-input v-model="form.collegeName" />
          </el-form-item>
          <el-form-item label="专业名称" prop="majorName">
            <el-input v-model="form.majorName" />
          </el-form-item>
          <el-form-item label="专业代码" prop="majorCode">
            <el-input v-model="form.majorCode" />
          </el-form-item>
          <el-form-item label="官网链接" prop="webSiteUrl">
            <el-input v-model="form.webSiteUrl" />
          </el-form-item>
          <el-form-item label="错误信息" prop="content">
            <el-input v-model="form.content" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="wrongDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmWrong">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="intention">
      <el-dialog
        v-model="intentionDialog"
        :title="isSchoolDelete ? '查看意向志愿' : '添加意向志愿'"
        width="30%"
        :before-close="handleIntentionClose"
      >
        <div v-if="isSchoolDelete">
          <div style="margin-top: -10px">
            <div
              v-for="(item, index) in volunteerArr"
              :key="index"
              class="mt20"
            >
              <el-card shadow="hover">
                <template #header>
                  <div class="fl-space-between-center">
                    <span>意向志愿{{ index + 1 }}</span>
                    <el-button
                      size="small"
                      type="danger"
                      plain
                      @click="onDeleteIntention(item, index)"
                      :icon="CloseBold"
                      circle
                    />
                  </div>
                </template>
                <div>
                  <div>意向学校：{{ item.schoolName }}</div>
                  <div class="mt10">意向学院：{{ item.collegeName }}</div>
                  <div class="mt10">
                    意向专业：{{ item.majorName }} ({{ item.majorCode }})
                  </div>
                  <div class="mt10">
                    学习方式：{{ item.applyLearningStyleDesc }}
                  </div>
                  <!-- <div class="mt10">是否二战：是</div> -->
                </div>
              </el-card>
            </div>
          </div>
        </div>
        <div class="upload" v-else>
          <el-form
            ref="formRefIntention"
            :rules="rulesIntention"
            :model="formIntention"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="本科学校" prop="benSchoolName">
              <el-select
                v-model="formIntention.benSchoolName"
                clearable
                placeholder="请选择本科学校"
                @change="onSchoolChange"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in schoolOptions"
                  :key="item.schoolCode"
                  :label="item.schoolName"
                  :value="item.schoolCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="本科专业" prop="benMajorName">
              <el-input
                clearable
                v-if="isMajorEmpty"
                v-model="formIntention.benMajorName"
                placeholder="暂无数据，可手动输入"
              />
              <el-select
                v-else
                v-model="formIntention.benMajorName"
                clearable
                @change="onMajorChange"
                placeholder="请选择本科专业"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in majorOptions"
                  :key="item.majorCode"
                  :label="item.majorName"
                  :value="item.majorCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否二战" prop="twoFightFlag">
              <el-radio-group
                v-model="formIntention.twoFightFlag"
                @change="onRadioChange"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer" v-if="!isSchoolDelete">
            <el-button @click="intentionDialog = false">取消</el-button>
            <el-button
              :loading="IntentionLoading"
              type="primary"
              @click="confirmIntention"
              >确认</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        v-model="targetDialog"
        title="设置考研目标"
        width="30%"
        :before-close="targetDialogClose"
      >
        <el-button type="danger" :icon="Warning">完成考研目标设置，后续可能会收到更多相关院校信息推送</el-button>
        <div class="upload mt30">
          <el-form
            ref="formRefIntention"
            :rules="rulesIntention"
            :model="formIntention"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="本科学校" prop="benSchoolName">
              <el-select
                v-model="formIntention.benSchoolName"
                clearable
                placeholder="请选择本科学校"
                @change="onSchoolChange"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in schoolOptions"
                  :key="item.schoolCode"
                  :label="item.schoolName"
                  :value="item.schoolCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="本科专业" prop="benMajorName">
              <el-input
                clearable
                v-if="isMajorEmpty"
                v-model="formIntention.benMajorName"
                placeholder="暂无数据，可手动输入"
              />
              <el-select
                v-else
                v-model="formIntention.benMajorName"
                clearable
                @change="onMajorChange"
                placeholder="请选择本科专业"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="item in majorOptions"
                  :key="item.majorCode"
                  :label="item.majorName"
                  :value="item.majorCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否二战" prop="twoFightFlag">
              <el-radio-group
                v-model="formIntention.twoFightFlag"
                @change="onRadioChange"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="fl-end">
            <div class="fl-start-center">
              <el-button @click="targetDialogClose">取消</el-button>
              <el-button
                :loading="IntentionLoading"
                type="primary"
                @click="confirmIntention"
                >确认</el-button
              >
              <el-checkbox style="margin-left: 10px;" type="danger" v-model="targetChecked" border
                >不再提示</el-checkbox
              >
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="unlock">
      <el-dialog
        v-model="store.state.unlockDialog"
        width="670"
        align-center
        :before-close="onUnlockClose"
      >
        <div class="unlock-content">
          <el-icon @click="onUnlockClose" color="#f92f60" class="no-inherit">
            <CloseBold />
          </el-icon>
          <img src="@/assets/unlock-bg.png" />
          <div class="unlock-main">
            <div class="unlock-title">解锁信息</div>
            <div class="unlock-bg">
              <img src="@/assets/unlock-vip.png" class="unlock-vip" />
              <div style="width: 580px">
                <div>
                  <div class="unlock-tips1">
                    <div>研可岸择校网上线后免费服务了上百万用户</div>
                    <div class="mt10">
                      过高成本无法长久运营，决定每位用户将
                      <span>收费1元 (拼团)</span>
                    </div>
                    <div class="mt10">
                      <el-button type="success">限时优惠</el-button>
                    </div>
                  </div>
                  <div class="fl-center">
                    <div class="unlock-step">
                      <div class="fl-start-center">
                        <div class="unlock-step-top">
                          <div class="unlock-step-top-title">step1</div>
                          <div class="unlock-step-top-content fl-start-center">
                            <img :src="step1" class="unlock-step-top-code" />
                            <div class="unlock-step-top-text">
                              <div>微信扫码</div>
                              <div class="mt5">支付费用</div>
                            </div>
                          </div>
                        </div>
                        <div class="unlock-step-top ml10">
                          <div class="unlock-step-top-title">step2</div>
                          <div class="unlock-step-top-content fl-start-center">
                            <img :src="step2" class="unlock-step-top-code" />
                            <div class="unlock-step-top-text">
                              <div>微信扫码</div>
                              <div class="mt5">复制订单号</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="unlock-step-bottom mt20">
                        <div class="unlock-step-bottom-title">step3</div>
                        <div class="unlock-step-bottom-content fl-start-center">
                          <div>
                            <el-input
                              class="unlock-step-bottom-input"
                              clearable
                              v-model="unlockForm.yzOid"
                              placeholder="输入E开头订单号"
                            />
                          </div>
                          <div>
                            <el-button
                              class="unlock-step-bottom-button"
                              color="#f5c98f"
                              :dark="true"
                              :loading="buttonLoading"
                              @click="onUnlockClick"
                              >确认</el-button
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mt40 fl-space-between-center">
                  <div class="unlock-tips2">
                    <div class="tips-title">Q：为什么我的订单号激活失效？</div>
                    <div class="tips-subtitle">
                      A：拼团订单只有拼团成功后才能激活
                    </div>
                  </div>
                  <div class="unlock-service">
                    <div class="unlock-service-code">
                      <img :src="keFuUrl" />
                    </div>
                    <div class="unlock-service-title">扫码联系客服</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="unlock">
      <el-dialog
        v-model="store.state.tipsDialog"
        width="670"
        align-center
        :before-close="onTipsClose"
      >
        <div class="unlock-content">
          <el-icon @click="onTipsClose" color="#f92f60" class="no-inherit">
            <CloseBold />
          </el-icon>
          <img src="@/assets/unlock-bg.png" />
          <div class="unlock-main">
            <div class="unlock-title">解锁信息</div>
            <div class="unlock-bg">
              <img src="@/assets/unlock-vip.png" class="unlock-vip" />
              <div style="width: 580px">
                <div>
                  <div class="unlock-tips1">
                    <div>
                      注意：您的查询次数已达到上限，详情可查看👉
                      <el-link
                        style="font-weight: bold"
                        type="success"
                        @click="toAgreement({ type: 8905, name: '用户协议' })"
                        >用户协议</el-link
                      >
                    </div>
                    <div class="mt10">
                      如您需要继续查询，可以扫下方二维码购买查询次数
                    </div>
                  </div>
                  <div class="fl-center">
                    <div class="unlock-step">
                      <div class="fl-start-center">
                        <div class="unlock-step-top">
                          <div class="unlock-step-top-title">step1</div>
                          <div class="unlock-step-top-content fl-start-center">
                            <img
                              :src="tipsStep1"
                              class="unlock-step-top-code"
                            />
                            <div class="unlock-step-top-text">
                              <div>微信扫码</div>
                              <div class="mt5">支付费用</div>
                            </div>
                          </div>
                        </div>
                        <div class="unlock-step-top ml10">
                          <div class="unlock-step-top-title">step2</div>
                          <div class="unlock-step-top-content fl-start-center">
                            <img
                              :src="tipsStep2"
                              class="unlock-step-top-code"
                            />
                            <div class="unlock-step-top-text">
                              <div>微信扫码</div>
                              <div class="mt5">复制订单号</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="unlock-step-bottom mt20">
                        <div class="unlock-step-bottom-title">step3</div>
                        <div class="unlock-step-bottom-content fl-start-center">
                          <div>
                            <el-input
                              class="unlock-step-bottom-input"
                              clearable
                              v-model="unlockForm.yzOid"
                              placeholder="输入E开头订单号"
                            />
                          </div>
                          <div>
                            <el-button
                              class="unlock-step-bottom-button"
                              color="#f5c98f"
                              :dark="true"
                              :loading="buttonLoading"
                              @click="onTipsClick"
                              >确认</el-button
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mt40 fl-center">
                  <div class="unlock-service">
                    <div class="unlock-service-code">
                      <img :src="tipsKeFuUrl" />
                    </div>
                    <div class="unlock-service-title">扫码联系客服</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="upload">
      <el-dialog
        v-model="store.state.numberDialog"
        title="查询次数过多"
        width="530"
        destroy-on-close
        center
      >
        <div>
          每天最多查询100次，超过次数后需要24小时后再查，请查看
          <el-link
            style="font-weight: bold"
            type="success"
            @click="toAgreement({ type: 8905, name: '用户协议' })"
            >👉用户协议</el-link
          >
          <!-- <div>1、查询次数过多(请查看用户协议第三条<el-link style="font-weight: bold;" type="success" @click="toAgreement({ type: 8905, name: '用户协议' })">👉用户协议</el-link>)</div>
          <div style="margin-top: 10px">
            2、考研辅导老师可申请更多次数<el-link style="font-weight: bold;" type="success" @click="showAbout">👉点此联系我们（备注：择校网次数增加）</el-link>
          </div> -->
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="store.state.numberDialog = false"
              >关闭</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="code-content">
      <div class="code-img">
        <img :src="QRcodeImage.url" style="width: 120px; height: 120px" />
      </div>
      <div class="code-text">
        <el-button type="success">{{ QRcodeImage.tips }}</el-button>
      </div>
    </div>
    <el-dialog width="320px" v-model="showAboutDialog">
      <div style="width: 280px; height: 320px; text-align: center">
        <img style="width: 240px; height: 240px" :src="connectUsdata.content" />
        <!-- <p style="text-align: left;font-size: 14px;color: #333">{{connectUsdata.tips}}</p> -->
      </div>
    </el-dialog>
    <maskLayer v-model="visible" center append-to-body>
      <div class="ad-image" @click="navigate(adData)">
        <img :src="adData.imgUrl" style="width: 895px; height: 381px" />
        <div class="ad-close" @click.stop="onMaskClose">
          <el-button type="danger" :icon="CloseBold" circle />
        </div>
        <div class="title-mask">
          <div>
            {{ adData.title }}
          </div>
        </div>
      </div>
    </maskLayer>
  </div>
</template>
<script setup>
import {
  Warning,
  CirclePlus,
  CloseBold,
  CircleCheck,
  View,
} from "@element-plus/icons-vue";
import { ref, onMounted, reactive, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import maskLayer from "@/components/maskLayer/maskLayer.vue";
import Enroll from "./component/Enroll.vue";
import ExamPaper from "./component/ExamPaper.vue";
import ExamScope from "./component/ExamScope.vue";
import RecruitStudent from "./component/RecruitStudent.vue";
import Score from "./component/Score.vue";
import StudentAnalysis from "./component/StudentAnalysis.vue";
import {
  schoolDetail,
  changeWrong,
  tipsVip,
  changeUnlock,
  changeUnlockAugment,
  QRcode,
  activationVip,
  vipBecomeDueTime,
  applyInfo,
  allSchool,
  allMajor,
  volunteerCount,
  deleteInfo,
  volunteerList,
  getAdId,
  exportMajorData,
  connectUs,
} from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
import { useStore } from "vuex";
const store = useStore();
const route = useRoute();
const router = useRouter();
const organizationDialog = ref(false);
const formOrganization = ref({});
const formOrganizationRef = ref();
// 表单规则
const rulesOrganization = {
  email: [
    {
      required: true,
      message: "请填写邮箱地址",
      trigger: "blur",
    },
    {
      type: "email",
      message: "请填写正确邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
};
const showAboutDialog = ref(false);
function showAbout() {
  showAboutDialog.value = true;
}
// 激活新的会员
async function onTipsClick() {
  if (unlockForm.value.yzOid == "") {
    ElMessage({
      message: "请填写E开头订单号",
      type: "warning",
      showClose: true,
    });
    return;
  }
  buttonLoading.value = true;
  const result = await changeUnlockAugment(unlockForm.value);
  const deRes = JSON.parse(decrypt(result));
  console.log(deRes);
  if (deRes.status === 0) {
    unlockForm.value.yzOid = "";
    ElMessage.success("激活成功!");
    buttonLoading.value = false;
    store.commit("setTipsDialog", false);
    callChildMethod();
  } else {
    ElMessage({
      message: deRes.msg,
      type: "warning",
      showClose: true,
    });
    buttonLoading.value = false;
  }
}
function onTipsClose() {
  store.commit("setTipsDialog", false);
}
// 联系我们
const connectUsdata = ref("");
// 联系我们
async function getConnectUs() {
  try {
    const data = await connectUs();
    if (data.status === 0) {
      connectUsdata.value = JSON.parse(data.result);
    }
  } catch (error) {}
}
function toAgreement(params) {
  let url = router.resolve({
    path: `/school/agreement/agreement`,
    query: { type: params.type, name: params.name },
  }).href;
  window.open(url);
}
function handleOrganizationClose() {
  organizationDialog.value = false;
}
function confirmOrganization() {
  try {
    formOrganizationRef.value.validate(async (res) => {
      if (res) {
        let data = {
          majorOutRelationId: majorId.majorOutRelationId,
          email: formOrganization.value.email,
        };
        const result = await exportMajorData(data);
        const deRes = JSON.parse(decrypt(result));
        console.log(deRes);
        if (deRes.status === 0) {
          ElMessage.success("导出中,请稍后到邮箱查看!");
          organizationDialog.value = !organizationDialog.value;
        }
      }
    });
  } catch (error) {
    organizationDialog.value = false;
  }
}
function onExportMajorData() {
  organizationDialog.value = !organizationDialog.value;
}
// 显示遮罩层
const visible = ref(false);
const adData = ref({});
async function showMask() {
  const data = await getAdId();
  if (data.status === 0) {
    try {
      let adImage = data.result == null ? [] : JSON.parse(data.result);
      if (adImage.length > 0) {
        adData.value = adImage[0];
        // 判断是否显示广告，仅在adData.value有效时进行比较
        if (adData.value && store.state.adId == adData.value.adId) {
          visible.value = false;
        } else {
          visible.value = true;
        }
      } else {
        visible.value = false;
      }
    } catch (e) {
      console.error("JSON解析错误:", e);
      visible.value = false;
    }
  }
}
function navigate(item) {
  if (item.jumpUrl == "") {
    ElMessage.warning("暂无跳转链接!");
    return;
  }
  window.open(item.jumpUrl, "_blank");
}
function onMaskClose() {
  nextTick(() => {
    window.localStorage.setItem("adId", adData.value.adId);
    store.commit("setAdId", adData.value.adId);
    visible.value = false;
  });
}
// 当前激活tab
const active = ref(0);
const activeCom = ref(Enroll);
const formRef = ref();

// 专业id
const majorId = reactive({
  majorOutRelationId: route.query.majorOutRelationId,
});
// 学校信息
const schoolObj = ref({
  contactRsp: {},
  schoolTags: [],
});
// 纠错弹窗
const wrongDialog = ref(false);
// 显示纠错弹窗
function showWrong() {
  form.value = {
    schoolName: schoolObj.value.schoolName,
    webSiteUrl: schoolObj.value.contactRsp.wz,
    majorName: schoolObj.value.majorName,
    majorCode: schoolObj.value.majorCode,
    collegeName: schoolObj.value.collegeName,
    majorOutRelationId: majorId.majorOutRelationId,
  };
  wrongDialog.value = !wrongDialog.value;
}
// 意向志愿弹框
const isSchoolDelete = ref(false);
const isMajorEmpty = ref(false);
const intentionDialog = ref(false);
const formRefIntention = ref();
const schoolOptions = ref([]);
const majorOptions = ref([]);
const formIntention = ref({
  applyOutRelationId: "",
  benMajorCode: "",
  benMajorName: "",
  benSchoolCode: "",
  benSchoolName: "",
  twoFightFlag: "",
});
// 表单规则
const rulesIntention = {
  benSchoolName: [{ required: true, message: "请选择学校!", trigger: "blur" }],
  benMajorName: [{ required: true, message: "请选择专业!", trigger: "blur" }],
  twoFightFlag: [
    { required: true, message: "请选择是否二战!", trigger: "blur" },
  ],
};
function onIntentionDialog() {
  isSchoolDelete.value = false;
  console.log(IntentionLoading.value);
  if (IntentionLoading.value) return;
  if (IntentionShow.value) {
    ElMessage({
      message: "您已设置过意向志愿，请勿重复设置",
      type: "warning",
      showClose: true,
    });
    return;
  }
  if (volunteerArr.value.length >= 3) {
    ElMessage({
      message: "只允许设置三条志愿",
      type: "warning",
      showClose: true,
    });
    isSchoolDelete.value = true;
    intentionDialog.value = !intentionDialog.value;
    return;
  }
  ElMessageBox.confirm("需要先设置该院校专业为目标志愿才能查看，是否设置？", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    title: "提示",
    type: "warning",
    center: true,
  })
    .then(() => {
      intentionDialog.value = !intentionDialog.value;
      formIntention.value = {
        applyOutRelationId: majorId.majorOutRelationId,
        benMajorCode:
          studentInfoRsp.value.benMajorCode == undefined
            ? ""
            : studentInfoRsp.value.benMajorCode,
        benMajorName:
          studentInfoRsp.value.benMajorName == undefined
            ? ""
            : studentInfoRsp.value.benMajorName,
        benSchoolCode:
          studentInfoRsp.value.benSchoolCode == undefined
            ? ""
            : studentInfoRsp.value.benSchoolCode,
        benSchoolName:
          studentInfoRsp.value.benSchoolName == undefined
            ? ""
            : studentInfoRsp.value.benSchoolName,
        twoFightFlag:
          studentInfoRsp.value.twoFightFlag == undefined
            ? ""
            : studentInfoRsp.value.twoFightFlag,
      };
      console.log(formIntention.value);
      if (studentInfoRsp.value.benSchoolCode) {
        getAllMajor(studentInfoRsp.value.benSchoolCode);
      }
      getAllSchool();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}
const targetChecked = ref(false);
const targetDialog = ref(false);
const volunteerArr = ref([]);
const studentInfoRsp = ref({});
async function getVolunteerList() {
  try {
    const result = await volunteerList();
    const res = JSON.parse(decrypt(result));
    console.log(res, "List");
    if (res.status === 0 && res.result) {
      studentInfoRsp.value = res.result.studentInfoRsp;
      volunteerArr.value = res.result.intentionMajorRsp;
      for (
        let index = 0;
        index < res.result.intentionMajorRsp.length;
        index++
      ) {
        const item = res.result.intentionMajorRsp[index];
        if (
          item.majorOutRelationId === JSON.parse(majorId.majorOutRelationId)
        ) {
          IntentionShow.value = true;
          return;
        }
      }
    } else {
      targetDialog.value = store.state.isVip && !store.state.noMore;
      if (targetDialog.value) {
        formIntention.value.applyOutRelationId = majorId.majorOutRelationId;
        getAllSchool();
      }
      console.log(targetDialog.value, 999);
    }
  } catch (error) {
    // throw new Error(error)
  }
}
function targetDialogClose() {
  targetDialog.value = false;
  if (targetChecked.value) {
    store.commit("setNoMore", true);
  }
}
async function onDeleteIntention(item, index) {
  const result = await deleteInfo({
    applyOutRelationId: item.majorOutRelationId,
  });
  const deRes = JSON.parse(decrypt(result));
  console.log(deRes);
  if (deRes.status === 0) {
    ElMessage.success("删除成功!");
    volunteerArr.value.splice(index, 1);
    console.log(volunteerArr.value.length);
    if (volunteerArr.value.length == 0) {
      isSchoolDelete.value = false;
      formIntention.value = {
        applyOutRelationId: majorId.majorOutRelationId,
        benMajorCode:
          studentInfoRsp.value.benMajorCode == undefined
            ? ""
            : studentInfoRsp.value.benMajorCode,
        benMajorName:
          studentInfoRsp.value.benMajorName == undefined
            ? ""
            : studentInfoRsp.value.benMajorName,
        benSchoolCode:
          studentInfoRsp.value.benSchoolCode == undefined
            ? ""
            : studentInfoRsp.value.benSchoolCode,
        benSchoolName:
          studentInfoRsp.value.benSchoolName == undefined
            ? ""
            : studentInfoRsp.value.benSchoolName,
        twoFightFlag:
          studentInfoRsp.value.twoFightFlag == undefined
            ? ""
            : studentInfoRsp.value.twoFightFlag,
      };
      console.log(formIntention.value);
      if (studentInfoRsp.value.benSchoolCode) {
        getAllMajor(studentInfoRsp.value.benSchoolCode);
      }
      getAllSchool();
    }
  } else {
    ElMessage({
      message: deRes.msg,
      type: "warning",
      showClose: true,
    });
    buttonLoading.value = false;
  }
}
async function getAllSchool() {
  const res = await allSchool();
  if (res.status === 0) {
    schoolOptions.value = res.result;
  }
}
async function getAllMajor(code) {
  isMajorEmpty.value = false;
  const res = await allMajor({ schoolCode: code });
  if (res.status === 0) {
    majorOptions.value = res.result;
    isMajorEmpty.value = res.result.length === 0 ? true : false;
  }
}
function onMajorChange(val) {
  majorOptions.value.forEach((item) => {
    if (item.majorCode === val) {
      formIntention.value.benMajorCode = item.majorCode;
      formIntention.value.benMajorName = item.majorName;
    }
  });
}
function onSchoolChange(val) {
  majorOptions.value = [];
  formIntention.value.benMajorCode = "";
  formIntention.value.benMajorName = "";
  schoolOptions.value.forEach((item) => {
    if (item.schoolCode === val) {
      formIntention.value.benSchoolCode = item.schoolCode;
      formIntention.value.benSchoolName = item.schoolName;
      getAllMajor(item.schoolCode);
    }
  });
}

function onRadioChange(params) {
  console.log(params);
}
// 纠错表单
const form = ref({
  schoolName: "",
  majorName: "",
});
// 解锁按钮
const buttonLoading = ref(false);
// 解锁表单
const unlockForm = ref({
  yzOid: "",
});
function onChangeUnlock() {
  store.commit("setUnlockDialog", true);
}
// 跳转编辑详情页
function toEditDetail() {
  let url = router.resolve({
    path: `/school/edit/EditDetailPage`,
    query: { majorOutRelationId: majorId.majorOutRelationId },
  }).href;
  window.open(url);
}
// 关闭解锁弹框
function onUnlockClose() {
  store.commit("setUnlockDialog", false);
}
const childRef = ref();
const callChildMethod = () => {
  childRef.value.childMethod();
};
async function onUnlockClick() {
  if (unlockForm.value.yzOid == "") {
    ElMessage({
      message: "请填写E开头订单号",
      type: "warning",
      showClose: true,
    });
    return;
  }
  buttonLoading.value = true;
  const result = await changeUnlock(unlockForm.value);
  const deRes = JSON.parse(decrypt(result));
  console.log(deRes);
  if (deRes.status === 0) {
    unlockForm.value.yzOid = "";
    ElMessage.success("激活成功!");
    buttonLoading.value = false;
    store.commit("setUnlockDialog", false);
    callChildMethod();
  } else {
    ElMessage({
      message: deRes.msg,
      type: "warning",
      showClose: true,
    });
    buttonLoading.value = false;
  }
}
// tab列表
const tabList = [
  {
    label: "录取名单",
    value: 0,
    component: Enroll,
  },
  {
    label: "分数分析",
    value: 1,
    component: Score,
  },
  {
    label: "招生人数",
    value: 2,
    component: RecruitStudent,
  },
  {
    label: "考试范围",
    value: 3,
    component: ExamScope,
  },
  {
    label: "考生分析",
    value: 4,
    component: StudentAnalysis,
  },
  // {
  //   label: "考研真题",
  //   value: 5,
  //   component: ExamPaper,
  // },
];
// tab 点击
function clickTab(el) {
  active.value = el.value;
  activeCom.value = el.component;
}

// 表单规则
const rules = {
  schoolName: [{ required: true, message: "请输入学校名称!", trigger: "blur" }],
  collegeName: [
    { required: true, message: "请输入学校名称!", trigger: "blur" },
  ],
  majorName: [{ required: true, message: "请输入专业名称!", trigger: "blur" }],
  majorCode: [{ required: true, message: "请输入专业代码!", trigger: "blur" }],
  wz: [{ required: true, message: "请输入官网链接!", trigger: "blur" }],
  content: [{ required: true, message: "请输入错误信息!", trigger: "blur" }],
};
function showLoginModal() {}
// 确认就错
function confirmWrong() {
  try {
    formRef.value.validate(async (res) => {
      if (res) {
        const result = await changeWrong(form.value);
        const deRes = JSON.parse(decrypt(result));
        if (deRes.status === 0) {
          ElMessage.success("提交成功!");
          wrongDialog.value = !wrongDialog.value;
        }
      }
    });
  } catch (error) {
    wrongDialog.value = false;
  }
}
const IntentionShow = ref(false);
const IntentionLoading = ref(false);
const RelationIdList = ref([]);
// 确认添加意向志愿
function confirmIntention() {
  try {
    formRefIntention.value.validate(async (res) => {
      if (res) {
        IntentionLoading.value = true;
        const result = await applyInfo(formIntention.value);
        const deRes = JSON.parse(decrypt(result));
        console.log(deRes);
        if (deRes.status === 0) {
          getVolunteerList();
          getVolunteerCount();
          ElMessage.success("添加成功!");
          targetDialog.value = false;
          if (targetChecked.value) {
            store.commit("setNoMore", true);
          }
          IntentionShow.value = true;
          intentionDialog.value = false;
          setTimeout(() => {
            IntentionLoading.value = false;
          }, 500);
        } else {
          ElMessage.warning("添加失败，请联系管理员!");
        }
      }
    });
  } catch (error) {
    intentionDialog.value = false;
  }
}

// 获取学校详情
async function getSchoolDetail() {
  try {
    const result = await schoolDetail({
      majorOutRelationId: majorId.majorOutRelationId,
    });
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status === 0) {
      schoolObj.value = res.result;
    }
  } catch (e) {
    goHome();
  }
}
function goHome() {
  router.push({
    name: "school",
  });
}
function handleClose() {
  wrongDialog.value = false;
}

function handleIntentionClose() {
  intentionDialog.value = false;
  targetDialog.value = false;
}
const QRcodeImage = ref("");
// 获取小程序二维码
async function getQRcode() {
  try {
    const result = await QRcode();
    if (result.status === 0) {
      QRcodeImage.value = JSON.parse(result.result);
    }
  } catch (error) {
    // throw new Error(error)
  }
}
const tipsStep1 = ref("");
const tipsStep2 = ref("");
const tipsKeFuUrl = ref("");
// 获取激活引导图片
async function getTipsActivationVip() {
  try {
    const result = await tipsVip();
    if (result.status === 0) {
      let res = JSON.parse(result.result);
      console.log(res);
      tipsStep1.value = res.step1;
      tipsStep2.value = res.step2;
      tipsKeFuUrl.value = res.keFuUrl;
    }
  } catch (error) {
    // throw new Error(error)
  }
}

const step1 = ref("");
const step2 = ref("");
const keFuUrl = ref("");
// 获取激活引导图片
async function getActivationVip() {
  try {
    const result = await activationVip();
    if (result.status === 0) {
      let res = JSON.parse(result.result);
      console.log(res);
      step1.value = res.step1;
      step2.value = res.step2;
      keFuUrl.value = res.keFuUrl;
    }
  } catch (error) {
    // throw new Error(error)
  }
}
const count = ref(0);
// 今年新增多少人将该学校专业加入志愿
async function getVolunteerCount() {
  try {
    const data = {
      majorOutRelationId: majorId.majorOutRelationId,
    };
    const result = await volunteerCount(data);
    const res = JSON.parse(decrypt(result));
    console.log(res, "count");
    if (res.status === 0 && res.result) {
      count.value = res.result == null ? 0 : res.result;
    }
  } catch (error) {
    // throw new Error(error)
  }
}
onMounted(() => {
  getConnectUs();
  getVolunteerList();
  getVolunteerCount();
  getActivationVip();
  getTipsActivationVip();
  getSchoolDetail();
  getQRcode();
  showMask();
});
</script>
<style lang="less" scoped>
.down-tips {
  margin-bottom: 12px;
  color: #f56c6c;
}
::v-deep .intention .el-card__header {
  padding: 10px !important;
}
::v-deep .intention .el-card__body {
  padding: 10px !important;
}
.ad-image {
  cursor: pointer;
  width: 895px;
  height: 381px;
  position: relative;
  .ad-close {
    position: absolute;
    top: 5px;
    right: 5px;
  }
  .title-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    color: #fff;
  }
  .title-mask div {
    padding: 10px;
    font-size: 16px;
  }
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.mt5 {
  margin-top: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.pd20 {
  padding: 0 30px;
}
.fl-start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.fl-end {
  display: flex;
  justify-content: end;
}
.fl-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fl-space-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.intention {
  ::v-deep .el-dialog__body {
    padding: 10px 20px 0 !important;
  }
}
.unlock {
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }
  ::v-deep .el-dialog__header {
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 0 !important;
  }
  ::v-deep .el-dialog {
    background-color: transparent !important;
    box-shadow: 0 0 0 transparent !important;
  }
  .unlock-content {
    position: relative;
    width: 670px;
    height: 686px;
    img {
      width: 100%;
      height: 100%;
    }
    .unlock-main {
      position: absolute;
      top: 0;
      left: 0;
      width: 650px;
      height: 100%;
      padding: 0 10px 10px;
    }
    .no-inherit {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 22px;
      z-index: 9;
    }
    .unlock-vip {
      width: 109px;
      height: 94px;
      position: absolute;
      top: -76px;
      right: 30px;
    }
    .unlock-title {
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #252752;
    }
    .unlock-bg {
      position: relative;
      background-color: #fff;
      border-radius: 10px;
      padding: 40px 0;
      height: 510px;
      display: flex;
      justify-content: center;
      align-items: center;
      .unlock-tips1 {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        text-align: center;

        span {
          color: #ff6802;
          font-size: 22px;
        }
      }
      .unlock-step {
        background-color: #d9e9f7;
        padding: 20px;
        border-radius: 5px;
        margin-top: 30px;
        width: 395px;
        border: 1px dashed #7ec3fe;
        .unlock-step-top-title {
          background-color: #72beff;
          border-radius: 5px 5px 0 0;
          padding: 2px 0;
          width: 50px;
          text-align: center;
          text-align: center;
          color: #fff;
          font-style: italic;
          margin-left: 2px;
        }
        .unlock-step-top-content {
          border: 1px solid #878787;
          background-color: #fff;
          padding: 10px;
          border-radius: 3px;
          text-align: center;
          width: 170px;
          .unlock-step-top-code {
            width: 80px;
            height: 80px;
            background-color: #f8f5f5;
            border-radius: 5px;
          }
          .unlock-step-top-text {
            margin-left: 20px;
            font-size: 14px;
            color: #1d1d1d;
          }
        }
        .unlock-step-bottom-title {
          background-color: #72beff;
          border-radius: 5px 5px 0 0;
          padding: 2px 0;
          width: 50px;
          text-align: center;
          text-align: center;
          color: #fff;
          font-style: italic;
          margin-left: 4px;
        }
        .unlock-step-bottom-input {
          width: 300px;
          height: 40px;
        }
        .unlock-step-bottom-button {
          width: 80px;
          height: 36px;
          font-weight: bold;
          margin-left: 10px;
        }
      }
      .tips-title {
        font-weight: bold;
        font-size: 13px;
        color: #1d1d1d;
      }
      .tips-subtitle {
        font-size: 12px;
        margin-top: 5px;
        color: #1d1d1d;
      }
      .unlock-service {
        .unlock-service-code {
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            background-color: #f8f5f5;
            width: 80px;
            height: 80px;
            border-radius: 5px;
          }
        }
        .unlock-service-title {
          text-align: center;
          font-size: 12px;
          color: #1d1d1d;
          margin-top: 10px;
        }
      }
    }
  }
}
.code-content {
  position: fixed;
  top: 30%;
  right: 45px;
  .code-img {
    display: flex;
    justify-content: center;
  }
  .code-text {
    // font-size: 13px;
    // color: 000;
    // text-align: center;
    margin-top: 10px;
  }
}
.detail {
  width: 1200px;
  margin: 0 auto;

  .top {
    margin-top: 30px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    //height: 50px;
    //line-height: 50px;
    img {
      width: 200px;
    }
    .el-button {
      margin-right: 20px;
    }
  }
  .info {
    padding: 36px 32px 0;
    position: relative;
    background: linear-gradient(131deg, #f60, #ffbb48);
    height: 295px;
    .sch-top {
      display: flex;
      align-items: center;
      .logo {
        padding: 13px;
        box-sizing: border-box;
        border-radius: 30px;
        width: 160px;
        height: 160px;
        background-color: #fff;
        .logo-img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        margin-left: 24px;

        flex: 1;
        .sch-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #fff;
          font-size: 26px;
          .wrong {
            margin-left: auto;
            display: inline-block;
            padding: 4px 12px;
            border: 1px solid #fff;
            border-radius: 14px;
            font-size: 12px;
            cursor: pointer;
          }
          .major {
            margin-left: 10px;
            font-size: 20px;
          }
        }
        .sch-button {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          right: 0px;
          z-index: 9;
          .button-left {
            // margin-left: 100px;
            // color: #fff;
            margin-right: 10px;
          }
        }
        .item {
          margin: 5px 0;
          display: flex;
          align-items: center;
          height: 24px;
          .collegeName {
            font-size: 18px;
          }
          .image {
            margin-right: 5px;
            width: 18px;
            height: 18px;
          }
          span {
            font-size: 14px;
            color: #fff;
          }
        }
        .tags {
          display: flex;
          align-items: center;
          height: 50px;
          .ele {
            margin-right: 10px;
            box-sizing: border-box;
            border: 1px solid #fff;
            height: 30px;
            line-height: 24px;
            color: #fff;
            font-size: 14px;
            padding: 2px 13px;
            border-radius: 15px;
          }
        }
      }
    }
    .bottom {
      ul {
        margin-bottom: 0;
        display: flex;
        align-items: center;
      }
      .active {
        background-color: #fff;
        color: #ff7214;
      }
      li {
        margin-right: 10px;
        flex: 1 1;
        list-style: none;
        background: hsla(0, 0%, 100%, 0.3);
        color: #fff;
        text-align: center;
        height: 44px;
        line-height: 44px;
        cursor: pointer;
        z-index: 999;
        &:hover {
          background-color: #fff;
          color: #ff7214;
        }
      }
    }
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 210px;
      height: 210px;
      transform: rotate(180deg);
    }
    .rg {
      position: absolute;
      width: 210px;
      height: 210px;
      right: 0;
      bottom: 0;
    }
  }
  .con {
    padding: 32px 0;
    width: 100%;
  }
  .upload {
    .avatar-uploader {
      width: 100%;
      height: 100%;
      /deep/ .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
      }
      /deep/ .el-upload {
        border: 1px dashed #8c939d !important;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
    }
  }
}
</style>
